<template>
  <div class="flex-box">
    <el-card class="box-card" v-for="o in responseIntervalList" :key="o">
      <div slot="header" class="clearfix">
        <span>{{o.name }}</span>
      </div>
      <div class="num">{{ o.count }}</div>
      <div class="prent">{{ o.percent }}</div>
    </el-card>
  </div>
</template>
<script>
import { viewResponseInterval } from "@/api/monitor/response";
export default {
  data() {
    return {
      responseIntervalList: []
    };
  },
  mounted() {
    this.selectResponseInterval();
  },
  methods: {
    selectResponseInterval() {
      viewResponseInterval()
        .then(response => {
          this.responseIntervalList = response.data.rows;
        })
        .catch(() => {});
    }
  }
};
</script>

<style>
.num {
  font-size: 36px;
  color: #409eff;
}
.prent {
  text-align: right;
}
.box-card {
  width: 20%;
}
.flex-box {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-around;
}
</style>
